<template>
  <div class="container">
    <div class="login">
      <div class="logo"></div>
      <div class="login-form">
        <!-- model: 引用表单数据对象 -->
        <!-- rules: 引用表单校验规则 -->
        <el-form
          :model="user"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <!-- prop: 指定表单校验不通过的错误提示信息的展示位置 -->
          <el-form-item prop="username">
            <el-input
              v-model="user.username"
              autocomplete="off"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="user.password"
              autocomplete="off"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-login"
              round
              type="primary"
              @click="submitForm"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 和表单进行绑定的数据
      user: {
        username: "admin",
        password: "admin888",
      },
      // 表单校验规则
      rules: {
        // required: 必填项; message: 指定错误提示消息; trigger: 指定执行表单校验的时机
        username: { required: true, message: "请输入用户名", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" },
      },
    };
  },
  methods: {
    // 表单提交方法
    submitForm() {
      // validate: 是el-form组件提供的一个表单校验方法
      // valid: 系统自动注入的参数(布尔类型), true表示表单校验通过, false表示表单校验不通过
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // 发送数据请求, 提交账号和密码
          this.$axios.post("/userlogin", this.user).then((res) => {
            if (res.code === 200) {
              // 1-将登录信息存储到localStorage中
              localStorage.setItem("adminInfo", JSON.stringify(res.list));
              // 2-给用户一个成功提示
              this.$message({ type: "success", message: res.msg });
              // 3-自动跳转到管理中心
              this.$router.push("/");
            } else {
              this.$message({ type: "danger", message: res.msg });
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  min-width: 1366px;
  height: 100vh;
  min-height: 600px;
  background: linear-gradient(to bottom, #ff674b, #ff7967);
}
.login {
  position: relative;
  min-height: 600px;
  width: 800px;
  margin: 0 auto;
  height: 100%;
  background: url("../assets/imgs/loginbg.png") no-repeat center;
  background-size: 100% 100%;
}
.logo {
  position: absolute;
  top: 80px;
  right: 50px;
  width: 360px;
  height: 110px;
  background: url("../assets/imgs/logo.png") no-repeat center;
  background-size: 100% 100%;
}
.login-form {
  margin-top: 100px;
  position: absolute;
  right: 50px;
  top: 200px;
  width: 360px;
}
.btn-login {
  width: 100%;
}
</style>
